/*
 * @Description: 按档案分类统计
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2022-12-26 10:43:49
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import Nav from '@/components/Nav';
import { Tabs } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import { useFamilyStatisticsContext } from '../contexts/FamilyStatisticsContext';
import styles from '../styles/familyStatistics.module.scss';
const { TabPane } = Tabs;
const cx = classNames.bind(styles);

const table: any[] | (() => any[]) = [];

const segmentedList = [
  { label: '总容量', value: 'dataSize' },
  { label: '案卷总量', value: 'folderCounts' },
  { label: '文件总量', value: 'fileCounts' },
  { label: '电子文件总量', value: 'eFileCounts' },
  { label: '盒总量', value: 'boxCounts' },
  { label: '总米数', value: 'boxTotalWidth' }
];
const ClassificationDocuments = (props: any) => {
  const { ATList } = props;

  const { categoryList, setCategory } = useFamilyStatisticsContext();
  const [changedValue, setChangeValue] = useState({});

  // 选中的按照类型
  const options = [
    { title: '档案类型', name: 'archiveTypeIds', checkList: ATList },
    {
      title: '分类',
      name: 'classification',
      checkList: [
        { value: 1, label: '分类1' },
        { value: 2, label: '分类2' },
        { value: 3, label: '分类3' },
        { value: 4, label: '分类4' },
        { value: 5, label: '分类5' }
      ]
    }
  ];
  const [visibleData, setVisibleData] = useState([]);
  const [condition, setCondition] = useState(<></>);
  const [tableList, setTableList] = useState(table);
  const [segmentValue, setSegmentValue] = useState('dataSize');
  const [xData, setXData] = useState();
  const [yData, setYData] = useState([]);
  useEffect(() => {
    setCategory(changedValue);
  }, [changedValue]);

  useEffect(() => {
    setVisibleData(categoryList);
    setYData(categoryList?.map((item: any) => item?.name));
    setXData(categoryList?.map((item: any) => item[segmentValue]));
    setCondition(<></>);
  }, [categoryList, segmentValue]);
  /* 改变触发 */
  const onChangeYear = (value: any) => {
    setChangeValue({ ...value.chioce });
    setSegmentValue(value.segmentValue);
  };
  return (
    <>
      <h2 className={cx('title')}>按档案分类统计</h2>
      <VisualizationMain
        type={'时间'}
        condition={condition}
        segmented={segmentedList}
        tableList={tableList}
        choiceList={options}
        data={{ visibleData, xData, yData }}
        onChange={onChangeYear}
      />
    </>
  );
};
export default ClassificationDocuments;
